<template>
	<view class="box">
		<!-- 免费pLus菜 -->
		<view class="free">
			<view class="title f30 bold">免费PLUS菜</view>
			<view class="desc f24 c999">每天一款，天天0元享</view>
			<scroll-view scroll-x="true" class="scroll">
				<view class="demo" @click="goDetail">
					<!-- 图片 -->
					<view class="img f-w">
						<image src="https://jw.xzsw2021.com/static/client/icon_55@2x.png" mode=""></image>
					</view>
					<!-- 名字 -->
					<view class="name hide-line2 bold f24">樱桃小西红约50 0克/份樱桃小西红约50 0克/份樱桃小西红约50 0克/份</view>
					<!-- 价格 -->
					<view class="price f-w">
						<view class="price1 f24 bold red">￥0.00</view>
						<view class="price2 f22 c999">￥6.08</view>
					</view>
					<!-- 领取 -->
					<view class="lq" @click.stop="getFree">领取</view>
				</view>
				<view class="demo" v-for="(item,index) of 4" :key="index" @click="goDetail(item.id)">
					<!-- 图片 -->
					<view class="img f-w">
						<image src="https://jw.xzsw2021.com/static/client/icon_55@2x.png" mode=""></image>
					</view>
					<!-- 名字 -->
					<view class="name hide-line2 bold f24">樱桃小西红约50 0克/份樱桃小西红约50 0克/份樱桃小西红约50 0克/份</view>
					<!-- 价格 -->
					<!-- aa -->
					<view class="three fw-bt">
						<view class="three-left">
							<view class="f20 green">
								￥<text class="f26 bold">1.33</text>
								<image src="https://jw.xzsw2021.com/static/client/icon_121@2x.png" mode=""></image>
							</view>
							<view class="c999 f22">￥6.08</view>
						</view>
						<view class="three-img f-w" @click.stop="addCart(item.id)">
							<image src="https://jw.xzsw2021.com/static/client/icon_85@2x.png" mode=""></image>
						</view>
					</view>
				</view>
				<!--  -->
			</scroll-view>
			<view class="desc2 f24 c999">限量供应，任意金额订单都可享</view>
		</view>
		<!-- 专享pLus菜 -->
		<view class="free">
			<view class="title f30 bold">专享PLUS菜</view>
			<view class="desc f24 c999">超值低价商品等你来享，仅限PLUS会员能购买</view>
			<view class="list">
				<view class="demo" v-for="(item,index) of 8" :key="index" @click="goDetail(item.id)">
					<!-- 图片 -->
					<view class="img f-w">
						<image src="https://jw.xzsw2021.com/static/client/icon_55@2x.png" mode=""></image>
					</view>
					<!-- 名字 -->
					<view class="name hide-line2 bold f24">樱桃小西红约50 0克/份樱桃小西红约50 0克/份樱桃小西红约50 0克/份</view>
					<!-- 价格 -->
					
					<!-- aa -->
					<view class="three fw-bt">
						<view class="three-left">
							<view class="f20 green">
								￥<text class="f26 bold">1.33</text>
								<image src="https://jw.xzsw2021.com/static/client/icon_121@2x.png" mode=""></image>
							</view>
							<view class="c999 f22">￥6.08</view>
						</view>
						<view class="three-img f-w" @click.stop="addCart(item.id)">
							<image src="https://jw.xzsw2021.com/static/client/icon_85@2x.png" mode=""></image>
						</view>
					</view>
				</view>
				<!--  -->
			</view>
		</view>
		<!-- 开会员 -->
		<view class="member" @click="openMember">
			开通会员立即购买
		</view>
		<cart></cart>
	</view>
</template>

<script>
	import cart from '@/components/cart.vue'
	export default {
		components:{
			cart
		},
		data() {
			return {
				
			}
		},
		methods: {
			// 去详情
			goDetail(id){
				uni.navigateTo({
					url:'/pages/client/shop/shop-detail/shop-detail?id='+id
				})
			},
			// 领取
			getFree(id){
				console.log('得到');
			},
			// 加入购物车
			addCart(id){
				console.log('加入购物车');
			},
			// 开会员
			openMember(){
				console.log('开会员');
			}
		}
	}
</script>

<style>
	page{
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.box{
		padding:0 30rpx 190rpx;
		.red{
			color: #F83535;
		}
		.green{
			color: #028A69;
		}
		.free{
			.title{
				margin-top: 32rpx;
			}
			.desc{
				margin-top: 14rpx;
			}
			.desc2{
				margin-top: 28rpx;
			}
			.scroll{
				width: 690rpx;
				white-space: nowrap;
			}
			.demo{
				display: inline-block;
				flex-shrink: 0;
				margin-top: 26rpx;
				margin-right: 10rpx;
				width: 220rpx;
				height: 380rpx;
				padding: 0 20rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				box-sizing: border-box;
				overflow: hidden;
				.img{
					margin: 20rpx auto;
					width: 160rpx;
					height: 160rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.name{
					margin-top: 18rpx;
					width: 180rpx;
					white-space: pre-wrap;
				}
				.price{
					margin-top: 5rpx;
				}
				.price2{
					margin-left: 4rpx;
					text-decoration: line-through;
				}
				.lq{
					margin-top: 10rpx;
					width: 160rpx;
					height: 56rpx;
					line-height: 56rpx;
					text-align: center;
					color: #634512;
					font-size: 24rpx;
					background: linear-gradient(64deg, #FAE5B1, #F1CF7B);
					border-radius: 28rpx;
				}
				.three{
					margin-top: 40rpx;
					.three-left{
						image{
							width: 23rpx;
							height: 17rpx;
						}
					}
					.three-img{
						width: 48rpx;
						height: 48rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.c999{
						text-decoration: line-through;
					}
				}
			}
			.list{
				margin-top: 6rpx;
				&>view{
					margin: 20rpx 0 0 0;
				}
				&>view:not(:nth-child(3n-2)){
					margin-left: 15rpx;
				}
			}
		}
		.member{
			margin: 30rpx auto 0;
			width: 690rpx;
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
			color: #543416;
			font-weight: bold;
			background: linear-gradient(64deg, #FCE9B6, #EFCB75);
			border-radius: 45rpx;
		}
	}
</style>
